<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="position:absolute;right:0;top:3px">
                <table>
                    <tr>
                        <td>
                            <el-button type="primary" @click="btnRefresh" icon="el-icon-search" v-has="'PINQUERY'">查询</el-button>
                        </td>
                        <td>
                            <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                        </td>
                        <td>
                            <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                        </td>
                        <td>
                            <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
                        </td>
                        <!-- 用于测试通用打印方法 -->
                        <el-button @click="btnPrintDict" icon="el-icon-printer">打印</el-button>
                        <td>
                            <el-button @click="RecordExport" icon="el-icon-download" v-has="'PEXPORT'">导出</el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center" style="height:100%;">
                <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName" @current-change="currentChangeEvent" border fit :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',activeMethod: activeMethod,showStatus: true,showIcon:false}" @edit-actived="CellActive" :keyboard-config="keyConfig" height="auto" :edit-rules="xTable_validRules" header-align="center" @edit-closed="EditChange" :cell-class-name="cellClassName" highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="index" title="NO." width="60" align="center"></vxe-table-column>
                    <vxe-table-column field="seq" title="序号" width="80" :edit-render="{name:'input',autoselect: true}" sortable>
                    </vxe-table-column>
                    <vxe-table-column field="codeno" title="病人类型代码" width="130" :edit-render="{name:'input',autoselect: true}" sortable>
                    </vxe-table-column>
                    <vxe-table-column field="codena" title="病人类型名称" width="200" sortable :edit-render="{name:'input',autoselect: true}">
                    </vxe-table-column>
                    <vxe-table-column field="inputcode" title="录入码" width="150" sortable :edit-render="{name:'input',autoselect: true}">
                    </vxe-table-column>
                    <vxe-table-column field="pat_typeenname" title="英文名称" width="100" sortable align="center" :edit-render="{name:'input',autoselect: true}"></vxe-table-column>
                     <vxe-table-column field="notalertresult" title="不上报危急值" width="120" header-align="center" align="center">
                        <template v-slot="{row}">
                            <el-checkbox v-model="row.notalertresult" true-label="1" false-label="0"></el-checkbox>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="notjudgeresult" title="不判断危急值" width="120" header-align="center" align="center">
                        <template v-slot="{row}">
                            <el-checkbox v-model="row.notjudgeresult" true-label="1" false-label="0"></el-checkbox>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="color" sortable title="颜色" width="80" show-overflow header-align="center" align="center">
                        <template v-slot="{ row }">
                            <div style="height: 25px">
                                <el-color-picker v-model="row.colorval" size="mini" @change="changeColorEvent(row)"> </el-color-picker>
                            </div>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="showcolormode" title="报告列表颜色显示模式" width="140" header-align="center" align="center">
                        <template v-slot="{row}">
                            <el-select v-model="row.showcolormode">
                                <el-option v-for="(item, index) in showmodeOption" :value="item.value" :label="item.label" :key="index"></el-option>
                            </el-select>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="showcolorcolumn" title="颜色显示列" width="140" header-align="center" align="center">
                        <template v-slot="{row}">
                            <el-select v-model="row.showcolorcolumn">
                                <el-option v-for="(item, index) in showcolorcolOption" :value="item.value" :label="item.label" :key="index"></el-option>
                            </el-select>
                        </template>
                    </vxe-table-column>
                    <!-- <vxe-table-column field="kindno" title="代码类别" width="100" sortable align="center"></vxe-table-column>
                    <vxe-table-column field="securityflag" title="权限状态" width="100" sortable align="center" :edit-render="{name:'select',options: $opt.securityflagOption}"></vxe-table-column> -->
                </vxe-table>
            </div>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span><span class="el-icon-info">确定删除病人类型名称为<b style="color:red">{{ message }}</b>的记录吗？</span></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="SubmitDel">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils"; //引入工具类
export default {
    name: "MNG222",
    data() {
        return {
            tableData: [],
            message: "",
            selectrow: [],
            curselectrow: {},
            actionindex: 0,
            tempindex: 0,
            loading: false,
            dialogVisible: false,
            ishsow: false,
            okFirstLoading: true,
            keyConfig: {
                isArrow: true,
                isDel: true,
                isTab: true,
                isEdit: true,
            },
            xTable_validRules: {
                seq:[{ required: true, message: "序号必须填写" }],
                codeno: [{ required: true, message: "病人类型代码必须填写" }],
                codena: [{ required: true, message: "病人类型名称必须填写" }],
            },
            showmodeOption: [{value: "0", label: "不变色"},{value: "1", label: "改变底色"},{value: "2", label: "改变字体颜色"}],
            showcolorcolOption: [{value: "1", label: "病人姓名"},{value: "2", label: "整行"}],
        };
    },
    created() {
        this.InitPageDate(); //初始化主列表
    },
    mounted() {},
    updated() {
        if (this.okFirstLoading) {
            let currentrow = "";
            if (this.actionindex != 0) {
                //新增，修改，删除
                if (this.actionindex == 3) {
                    //如果是删除
                    if (this.tempindex > 0) {
                        currentrow = this.$refs.xTable.getData(this.tempindex);
                    } else {
                        currentrow = this.$refs.xTable.getData(0);
                    }
                } else {
                    //新增或修改
                    if (this.curselectrow && this.curselectrow != "") {
                        this.$nextTick(() => {
                            let row = this.curselectrow;
                            var alld = this.$refs.xTable.tableData;
                            for (var i = 0; i < alld.length; i++) {
                                if (alld[i].codeno == row.codeno) {
                                    this.tempindex = i;
                                    break;
                                }
                            }
                            currentrow = this.$refs.xTable.getData(this.tempindex);
                        });
                    } else {
                        currentrow = this.$refs.xTable.getData(0);
                    }
                }
            } else {
                //查询
                currentrow = this.$refs.xTable.getData(0);
                this.actionindex = 2;
                this.curselectrow = currentrow;
            }
            this.$nextTick(() => {
                if (currentrow) {
                    this.okFirstLoading = false;
                    this.$refs.xTable.setCurrentRow(currentrow);
                    this.message = currentrow.codena;
                }
            });
        }
    },
    methods: {
        InitPageDate() {
            this.loading = true;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG222",
                    method: "post",
                    data: {
                        action: "query",
                    },
                })
                .then((res) => {
                       //采样标本类型的数据
                    res.Data.forEach((item) => {
                        if (item.color != null) {
                           item.colorval = this.$pub.ColorChange(item.color); //转为带#的颜色
                        }
                        else{
                            item.colorval  = "#ffffff";
                        }
                    });
                    this.tableData = res.Data;
                    this.loading = false;
                    this.okFirstLoading = true;
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        btnRefresh() {
            this.InitPageDate();
        },
        activeMethod({ row, column }) {
            if (column.property == "securityflag") {
                return false;
            } else {
                return true;
            }
        },
        rowClassName({ row, rowIndex }) {
            let isDirty = this.$refs.xTable.hasRowChange(row);
            if (isDirty) {
                return "row-modify";
            }
            if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
        },
        currentChangeEvent({ row, $rowIndex }) {
            this.message = row.codena;
            this.actionindex = 2; //修改
            this.tempindex = $rowIndex;
            this.curselectrow = row;
        },
        btnAdd() {
            let initdata = {
                kindno: "PT",
                codeno: "",
                codena: "",
                inputcode: "",
                securityflag: "U",
                colorval :"#ffffff",
                pat_typeenname:"",
                notalertresult:"0",
                notjudgeresult:"0",
                showcolormode: "0",
                showcolorcolumn: "1",
                seq:(this.tableData.length + 1) * 10,
            };
            this.$refs.xTable.insert(initdata).then(({ row }) => {
                this.$refs.xTable.setCurrentRow(row);
                this.$refs.xTable.setActiveRow(row, "codeno");
            });
            this.actionindex = 1; //增加
            this.FunscrollY();
        },
        FunscrollY() {
            this.$nextTick(() => {
                var alldataLen = this.$refs.xTable.tableData.length;
                let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
                this.$refs.xTable.scrollToRow(L);
            });
        },
        btnDelete() {
            this.dialogVisible = true;
        },
        SubmitDel() {
            let delrow = this.$refs.xTable.getCurrentRow();
            if (delrow) {
                if (delrow.securityflag != "U") {
                    this.$message({
                        message: "取值不是U的属于系统内置的数据不可以被删除，但是可以修改！",
                        type: "warning",
                    });
                    return false;
                }
                var alld = this.$refs.xTable.tableData;
                var rowindex = alld.indexOf(delrow);
                this.$refs.xTable.remove(delrow);
                this.actionindex = 3; //删除
                let havedata = this.$refs.xTable.tableData;
                if (havedata.length > 0) {
                    if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                    this.tempindex = rowindex;
                    let selectrow = havedata[rowindex];
                    this.$refs.xTable.setCurrentRow(selectrow);
                    this.message = selectrow.codena;
                }
            } else {
                this.$message({
                    message: "请选择要删除的记录！",
                    type: "warning",
                });
            }
            this.dialogVisible = false;
        },
        EditChange({ row, column, rowIndex }) {
            if (column.property == "codena") {
                row.inputcode = this.$pub.CreateInputcode(row.codena, this, 16);
            }
        },
        SaveRecord() {
            this.$refs.xTable.validate((valid) => {
                if (valid) {
                    let tabledata = this.$refs.xTable.getRecordset();
                    if (tabledata.insertRecords.length > 0) {
                        this.curselectrow = tabledata.insertRecords[0];
                    }
                    this.$tool
                        .request({
                            url: "MNG/MNG2/MNG222",
                            method: "post",
                            data: {
                                action: "save",
                                urec: tabledata,
                            },
                        })
                        .then((response) => {
                            if (response.errcode == "1") {
                                this.$message({
                                    message: "操作成功！",
                                    type: "success",
                                });
                                this.InitPageDate();
                            } else {
                                this.$message({
                                    message: "保存失败！" + response.errmsg,
                                    type: "warning",
                                });
                            }
                        });
                }
            });
        },
        RecordExport() {
            this.$refs.xTable.exportCsv({ filename: "MNG222 病人类型" });
        },
        btnPrintDict(){
            let dataLength = 45; //定义最多打印多少数据
            this.$pub.printDict(this,"MNG222 病人类型",this.$refs.xTable);
        },
        CellActive({ row, rowIndex, column }) {
            this.actionindex = 2; //修改
            let len = this.$refs.xTable.tableData.length;
            if (rowIndex + 1 >= len) {
                if (row.codeno === null) {
                    row.kindno = "PT";
                    row.securityflag = "U";
                    this.$refs.xTable.setCurrentRow(row);
                    this.actionindex = 1; //新增
                    this.tempindex = this.$refs.xTable.getRowIndex(row);
                }
            }
        },
        //控制列的颜色
        cellClassName({ row, column }) {
            if (["kindno", "securityflag"].includes(column.property)) {
                return this.$pub.diseditcolumn();
            } else if (column.title == "NO.") {
                return this.$pub.diseditcolumn();
            }
        },
        changeColorEvent(row) {
            let color = row.colorval.split("#")[1];
            if (!!color) {
                row.color = this.$pub.ColorTrans(color);
                //this.hasChange();
            }
        },
    },
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}
/deep/.middle-center tr td div .el-input__inner {
    border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .vxe-table .vxe-body--column.col-orange {
    background-color: #ccc;
}
/deep/ tr.vxe-body--row.row-modify {
    color: blue !important;
}
</style>
